
<template>
  <main ref="container">
    <van-sticky :offset-top="0" @scroll="fnScrollTop">
      <van-nav-bar :safe-area-inset-top="true" class="navbar" :class="{'navbar': !isFix, 'navbar-fix': isFix}" @click-left="onClickLeft"
        @click-right="onClickRight">
        <template #left>
          <van-icon class="iconfont" class-prefix="icon" name="gengduo" :color="isFix ? `#fff` : `#1baeae`" size="18" />
        </template>
        <template #title>
          <van-row justify="space-between" align="center" class="header-search">
            <van-col span="11">
                <span class="title">新峰商城</span>
            </van-col>
            <van-col span="2" class="space">|</van-col>
            <van-col span="11" class="search" @click="goSearch">请输入搜索关键字</van-col>
        </van-row>
        </template>
        <template #right>
          <van-icon name="manager-o" :color="isFix ? `#fff` : `#1baeae`" size="24"/>
        </template>
      </van-nav-bar>
    </van-sticky>
    <van-swipe :autoplay="3000" lazy-render indicator-color="#1baeae">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image.image" style="width: 100%;height: 180px;" />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类菜单 -->
    <van-grid :gutter="10"  square :column-num="4" :border="false">
      <van-grid-item v-for="(value, index) in categories" :key="index" @click="changeCategory(value)">
        <div class="text-center">
          <van-image
            width="60"
            height="60"
            :src="value.image"
          />
          <div class="text-3 ftn13" v-text="value.text"></div>
        </div>
      </van-grid-item>
    </van-grid>
    <van-grid :column-num="2" :border="false">
      <van-grid-item url="https://hs.jikeshiyong.cn/">
          <van-image
            :src="sj"
            
          />
      </van-grid-item>
      <van-grid-item url="https://mh.jikeshiyong.cn/">
          <van-image
            :src="hhr"
          />
      </van-grid-item>
      <van-grid-item url="https://m.jikeshiyong.cn/">
          <van-image
            :src="sjwyd"
          />
      </van-grid-item>
      
    </van-grid>
    <!-- 最新商品 -->
    <div class="sub-title ftn18">最新商品</div>
    <van-row justify="center">
      <van-col :span="12" v-for="(value, index) in newGoods" :key="index">
        <Good :item="value"></Good>
      </van-col>
    </van-row>
    <!-- 热门商品 -->
    <div class="sub-title ftn18">热门商品</div>
    
    <van-list
      v-model:loading="hotGoods.list.loading"
      :finished="hotGoods.list.finished"
      finished-text="没有更多了"
      @load="fnGetNineData"
    >
        <van-row justify="center">
        <van-col :span="12" v-for="(value, index) in hotGoods.goods" :key="index">
          <Good :item="value"></Good>
        </van-col>
      </van-row>
    </van-list>
    
  </main>
</template>
<script lang="ts">
import { defineComponent, ref, defineAsyncComponent,reactive,onMounted,toRefs } from "vue";
import type {IBanner, INineList} from '@/plugins/utils'
import type {Ref, PropType} from 'vue'
import {login, fnGetBanner, fnGetNineList} from '@/service/index'
import {useRouter} from 'vue-router'
import mfsy from '@/assets/image/mfsy.png'
import jlsy from '@/assets/image/jlsy.png'
import cjsy from '@/assets/image/cjsy.png'
import zksy from '@/assets/image/zksy.png'
import sjwyd from '@/assets/image/index/sjwyd.png'
import hhr from '@/assets/image/index/gn_hhr.png'
import sj from '@/assets/image/index/gn_sj.png'
interface Scroll {
  scrollTop: number, 
  isFixed: boolean
}
interface ICategory {
  image: string,
  text: string
}
export default defineComponent({
  components: {
    Good: defineAsyncComponent(() => import('@/components/good.vue')),
  },
  props: {
      message: String
  },
  setup(props) {
    const isFix:Ref<Boolean> = ref(false), router = useRouter()
    // 吸顶
    const fnScrollTop = (e: Scroll):void => {
      let {isFixed} = e;
      isFix.value = isFixed;
    }

    const images:Ref<IBanner[]> = ref([]);

    const categories:Ref<ICategory[]> = ref([
      {
        text: '零折购',
        image: mfsy,
        id: 1
      },
      {
        text: '奖励购',
        image: jlsy,
        id: 3
      },
      {
        text: '超级购',
        image: cjsy,
        id: 4
      },
      {
        text: '折扣',
        image: zksy,
        id: 2
      }
    ])

    let newGoods:Ref<INineList[]> = ref([])

    let hotGoods: any = reactive({
      list: {
        loading:false,
        finished: false
      } as any,
      goods: [] as INineList[]
    })

    let goodLists:any;

    const fnGetNineData = (p?: number):void => {
      let page:number = 1;
       page = p ? p : page++;
       let {finished, loading} = hotGoods.list;
      fnGetNineList({p: page, n: 10, cid: ''}).then(res => {
        if (res.status) {
          if (page == 1) newGoods.value = res.content;
          hotGoods.goods.push(...res.content);
          
          goodLists = toRefs(hotGoods)
          loading = false;
          if (hotGoods.goods.length > 50) finished = true;
          hotGoods.list = {loading, finished}
        } else {
          finished = true;
          loading = false;
          hotGoods.list = {loading, finished}
        }
      })
    }

    const onClickLeft = () => {
      router.push({name: 'category'})
    }

    const onClickRight = () => {
      router.push({name: 'my'})
    }

    const goSearch = () => {
      router.push({name: 'search'})
    }

    const changeCategory = ({id}: any) => {
      router.push({
        name: 'list',
        query: {id: id}
      })
    }

    onMounted(() => {
      fnGetBanner().then(res => {
        if (res.status) images.value = res.data;
      });
      fnGetNineData(1)
    })

    return {
      isFix,
      fnScrollTop,
      images,
      sjwyd,
      hhr,
      sj,
      categories,
      newGoods,
      hotGoods,
      ...goodLists,
      fnGetNineData,
      onClickLeft,
      onClickRight,
      goSearch,
      changeCategory
    }
  }
})
</script>

<style lang="less" scoped>
.navbar-fix {
  background-color: @primary-color!important;
}
.navbar {
  .header-search {
    padding: 4px 30px 4px 10px;
    background-color: rgba(255,255,255, .7);
    border-radius: 20px;
    .title {
      font-size: 20px;
      color: @primary-color;
      padding: 0 5px;
      font-weight: bold;
    }
    .space {
      color: #666;
      padding: 0 5px;
    }
    .search {
      color: #666;
      font-size: 14px;
    }
  }
}
  
</style>